// 拍摄统计页面：新增/编辑弹窗

import React from "react";
import {Button, Col, DatePicker, Form, Input, message, Modal, Row} from "antd";
import {
    ButtonLock, InputText,
    // MyDatePicker,
    SelectAccount,
    SelectPerson,
    SelectPlatform,
    SelectShootStates
} from "../../components/BaseComponent/forms";
import {psApi} from "../../services/basic";
import moment from "moment";
import Dictionary from "../../services/dictionary";

class AddOrEdit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            title: "拍摄-详情"
        }
        this.dataFormLabel = {
            // jjry: "",
            yy: "",
            psry: "",
            shry: "",
            fbpt: "",
            fbzh: ""
        };
    }

    showModal = (handler, record) => {
        let title = "拍摄-详情";
        if (handler === "view") {
            title = "拍摄-详情";
        } else if (handler === "update") {
            title = "拍摄-编辑";
        } else if (handler === "create") {
            title = "拍摄-新增";
        }

        if (this.form) this.form.resetFields();
        this.id = null;
        this.setState({
            handler,
            title,
            visible: true
        }, () => {
            this.dateInit();

            if (["view", "update"].includes(handler)) {
                psApi.selectById(record.id).then(res => {
                    const {fbpt, psxm, fbzh, cx,  psry, yy, shry, zt, rq} = res.data;
                    this.id = record.id;
                    this.form.setFieldsValue({
                        fbpt, psxm, fbzh, cx,  psry, yy, shry, zt, rq: moment(rq, "YYYY-MM-DD")
                    });
                    this.dataFormLabel.fbpt = Dictionary.platform[fbpt];
                    Dictionary.getAccounts().then(list => {
                        const obj = list.find(item => item.value === fbzh);
                        this.dataFormLabel.fbzh = obj.label;
                    });

                    Dictionary.getPerson().then(list => {
                        // const jjryObj = list.find(item => item.value === jjry);
                        const yyObj = list.find(item => item.value === yy);
                        const psryObj = list.find(item => item.value === psry);
                        const shryObj = list.find(item => item.value === shry);
                        this.dataFormLabel = {
                            ...this.dataFormLabel,
                            // jjry: jjryObj ? jjryObj.label : "",
                            yy: yyObj ? yyObj.label : "",
                            psry: psryObj ? psryObj.label : "",
                            shry: shryObj ? shryObj.label : "",
                        }
                    })
                })
            }
        })
    }

    handleOk = () => {
        const api = this.state.handler === "create" ? psApi.createPs : psApi.updatePs;
        return new Promise((resolve, reject) => {
            this.form.validateFields().then(data => {
                api({
                    ...data,
                    id: this.id,
                    rq: moment(data.rq).format("YYYY-MM-DD"),
                    fbptmc: this.dataFormLabel.fbpt,
                    fbzhmc: this.dataFormLabel.fbzh,
                    // jjryxm: this.dataFormLabel.jjry,
                    yyxm: this.dataFormLabel.yy,
                    psryxm: this.dataFormLabel.psry,
                    shryxm: this.dataFormLabel.shry,
                }).then(res => {
                    message.success('操作成功');
                    this.props.editItemDone();// 刷新
                    this.setState({
                        visible: false
                    }, () => {
                        resolve();
                    })
                }).catch(() => reject())
            }).catch(e => {
                // 表单校验失败
                console.log(e.errorFields)
                reject();
            })
        })

    }

    handleCancel = () => {
        this.setState({
            visible: false
        })
    }

    dateInit = () => {
        const today = moment(new Date(), "YYYY-MM-DD");
        if (this.form) this.form.setFieldsValue({
            rq: today
        })
    }

    onFormChange = (data, e) => {
        const key = Object.keys(data)[0];
        const label = e ? e.children : null;
        this.dataFormLabel = {
            ...this.dataFormLabel,
            [key]: label
        }
    }

    onDateChange = data => {
        // this.form.setFieldsValue({
        //     ...data
        // })
    }

    render() {
        const rules = [{required: true, message: "此为必填项"}];
        return (<Modal
            title={this.state.title}
            visible={this.state.visible}
            // onOk={this.handleOk}
            onCancel={this.handleCancel}
            maskClosable={false}
            footer={this.state.handler === "view" ? null : [
                <Button onClick={this.handleCancel}>取消</Button>,
                <ButtonLock onClick={this.handleOk} type="primary">确定</ButtonLock>
            ]}
        >
            <Form ref={form => this.form = form}>
                <Row>
                    {/*<Input type="hidden" name="id"></Input>*/}
                    <SelectPlatform onFormChange={this.onFormChange} colSpan={24} rules={rules}></SelectPlatform>
                    <InputText label="拍摄项目" keyword="psxm" colSpan={24} rules={rules}></InputText>
                    <SelectAccount onFormChange={this.onFormChange} colSpan={24} rules={rules} label="发布账号"
                                   keyword="fbzh"
                                   key="fbzh"></SelectAccount>


                    <Col span={24}>
                        <Form.Item label="拍摄日期" name="rq" className="Item" rules={rules}>
                            <DatePicker
                                valueFormat="YYYY-MM-DD"
                                format="YYYY-MM-DD"
                                style={{width: "100%"}}
                                // disabledDate={this.disabledDate}
                                //         onChange={this.onDateChange}
                            ></DatePicker>
                        </Form.Item>
                    </Col>
                    {/*<MyDatePicker colSpan={24} onFormChange={this.onFormChange} rules={rules} label="拍摄日期" keyword="rq" key="rq"></MyDatePicker>*/}
                    <Col span={24}>
                        <Form.Item label='车型' name="cx">
                            <Input placeholder="输入车型"></Input>
                        </Form.Item>
                    </Col>
                    {/*<SelectPerson onFormChange={this.onFormChange} colSpan={24} label="剪辑人员" keyword="jjry"*/}
                    {/*              key="jjry"></SelectPerson>*/}
                    <SelectPerson onFormChange={this.onFormChange} colSpan={24} label="拍摄/剪辑" keyword="psry"
                                  key="psry"></SelectPerson>
                    <SelectPerson onFormChange={this.onFormChange} colSpan={24} label="演员" keyword="yy"
                                  key="yy"></SelectPerson>
                    <SelectPerson onFormChange={this.onFormChange} colSpan={24} label="审核人员" keyword="shry"
                                  key="shry"></SelectPerson>
                    <SelectShootStates colSpan={24} rules={rules}></SelectShootStates>
                </Row>
            </Form>
        </Modal>)
    }
}

export default AddOrEdit;